<template>
    <!-- index中的系列产品 -->
    <div class="series">
        <h2>灵眸 Osmo</h2>
        <div class="series-top">
            <div class="series-top-left" v-for="item in theFirst" :key="item.id">
                <a @click="goProduct(item)">
                    <img :src="item.s_goods_photos[0].path" alt="">
                    <div class="detail">
                        <span class="new">新品上市</span>
                        <h4>{{item.name}}</h4>
                        <p>
                            {{item.desc}}
                        </p>
                        <span class="price">￥{{item.price}}</span>
                    </div>
                </a>
            </div>
            <div class="series-top-right">
                <img src="../assets/img/index/img/ia_10076.png" alt="">
            </div>
        </div>
        <div class="series-bottom">
            <ul>
                <li v-for="(item,index) in products" :key="index">
                    <a @click="goProduct(item)">
                       <div class="img">
                            <img :src="item.s_goods_photos[0].path" alt="">
                        </div>
                        <div class="detail">
                            <span class="new">新品上市</span>
                            <h4>{{item.name}}</h4>
                            <span class="price">￥{{item.price}}</span>
                        </div> 
                    </a>  
                </li>
                
            </ul>
        </div>
    </div>
</template>

<script>
// import {mapActions} from 'vuex'
export default {
    data() {
        return {
            theFirst:[],
            products:[],
        }
    },

    props:['product'],

    created() {
        // this.getClassifyGoods()
        // console.log(this.osmo);
    },

    watch: {
        product() {
            if(this.product.length !== 0) {
               this.theFirst = [this.product[0]],
               this.products = this.product
            }
        }
    },

    methods: {
        // ...mapActions('goods',['getClassifyGoods'])
        goProduct(item) {
            this.$router.push(`/products/${item.id}`)
        }
    }
}
</script>

<style lang="scss" scope>
.series {
    margin-top: 36px;
    color: #3b3e40;
    h2 {
        font-size: 32px;
        text-align: left;
        margin-bottom: 16px;
    }
    .series-top {
        background-color: white;
        display: flex;
        .series-top-left {
            width: 50%;
            padding: 50px 67px 50px 30px;
            a {
                display: flex;
                justify-content: space-between; 
                img {
                    width: 264px;
                }
                .detail {
                    margin: auto 0;
                    .new {
                        font-size: 14px;
                        color: #FA8C16;
                    }
                    h4 {
                        font-size: 24px;
                        margin-bottom: 16px;
                    }
                    p {
                        font-size: 14px;
                        line-height: 24px;
                        margin-bottom: 24px;
                    }
                    .price {
                        font-size: 16px;
                    }
                }
            }
        }
        .series-top-right {
            width: 50%;
            img {
                width: 100%;
            }
        }
    }
    .series-bottom {
        margin-top: 16px;
        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li {
               width: 292px; 
                background-color: white;
                margin-bottom: 16px;
                .img {
                    padding: 24px 16px 8px;
                    box-sizing: content-box;
                    img {
                        width: 100%;
                    }
                }
                .detail {
                    padding: 15px;
                    .new {
                        font-size: 12px;
                        color: #FA8C16;
                    }
                    h4 {
                        font-size: 18px;
                        margin: 8px 0;
                    }
                    .price {
                        display: block;
                        font-size: 14px;
                        margin: 20px 0;
                    }
                }
               
            }
        }
    }

}
</style>